<template>
  <div class="videosEarth">
    <div id="cesiumContainer">
      <div id="cesiumxin" style="position:fixed;left:0;z-index:99">
      </div>
    </div>
    <video id="trailer" style="display: none;" muted autoplay loop crossorigin controls>
      <source src="./imgvideos/tt.mp4" type="video/mp4">
      你的浏览器不支持<code>视频</code>元素
    </video>
  </div>
</template>
<script>
// 加载 Cesium
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
var viewer // 视图
export default {
  mounted() {
    this.initHandle()
  },
  methods: {
    /* *********************初始化 start********************* */
    initHandle() {
      var viewerOption = {
        geocoder: false, // 地理位置查询定位控件
        homeButton: false, // 默认相机位置控件
        timeline: false, // 时间滚动条控件
        navigationHelpButton: false, // 默认的相机控制提示控件
        fullscreenButton: false, // 全屏控件
        scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        baseLayerPicker: false, // 底图切换控件
        animation: false // 控制场景动画的播放速度控件
      }
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA'
      viewer = new Cesium.Viewer('cesiumContainer', viewerOption)

      // 加载底图
      viewer.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
          url: require('./imgvideos/worldimage.jpg')
        })
      )
      // 添加视频
      var videoElement = document.getElementById('trailer')
      videoElement.play()
      var rect = viewer.entities.add({
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
          material: videoElement
        }
      })
      viewer.trackedEntity = rect

      // 隐藏 LOGO 版权
      viewer._cesiumWidget._creditContainer.style.display = 'none'

      // 去掉entity的点击事件 start
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 去掉entity的点击事件 end
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
